import React from "react";
import { Button, Flex, Space, Table, Tag } from "antd";
import {
  PlusOutlined,
  SettingOutlined,
  ReloadOutlined,
  ColumnHeightOutlined,
} from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import { text } from "stream/consumers";

interface DataType {
  id: string;
  username: string;
  nickname: string;
  phoneNumber: string;
  mail: string;
  department: string;
  position: string;
  role?: string;
  address: string;
}

/*
编号	用户名	昵称	手机号	邮箱	部门	职位	角色	状态	操作
*/
const columns: ColumnsType<DataType> = [
  {
    title: "编号",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
    render: (text) => <a>{text}</a>,
  },
  {
    title: "昵称",
    dataIndex: "nickname",
    key: "nickname",
  },
  {
    title: "手机号",
    dataIndex: "phoneNumber",
    key: "phoneNumber",
  },
  {
    title: "邮箱",
    dataIndex: "mail",
    key: "mail",
  },
  {
    title: "部门",
    dataIndex: "department",
    key: "department",
  },
  {
    title: "职位",
    dataIndex: "position",
    key: "position",
  },
  {
    title: "角色",
    dataIndex: "role",
    key: "role",
    render: (text) => (text !== undefined ? text : "-"),
  },
  {
    title: "状态",
    dataIndex: "address",
    key: "address",
    render: (text) => (
      <Space>
        <div
          style={{
            backgroundColor: "green",
            minWidth: "6px",
            minHeight: "6px",
            borderRadius: "50%",
          }}
        ></div>
        正常
      </Space>
    ),
  },
  /*
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  */
  {
    title: "Action",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        <Button type="primary">编辑</Button>
        <Button type="primary" danger>
          删除
        </Button>
      </Space>
    ),
  },
];

const data: DataType[] = [
  {
    id: "1",
    username: "张三",
    nickname: "麻子",
    phoneNumber: "13409671234",
    mail: "SSA@gmail.com",
    department: "",
    position: "",
    role: "",
    address: "",
  },
  {
    id: "2",
    username: "李四",
    nickname: "眼睛",
    phoneNumber: "13409671234",
    mail: "SSA@gmail.com",
    department: "",
    position: "",
    role: "",
    address: "",
  },
  {
    id: "3",
    username: "王五",
    nickname: "麻子",
    phoneNumber: "13409671234",
    mail: "SSA@gmail.com",
    department: "",
    position: "",
    address: "",
  },
];

const CustomTableHeader = () => {
  return (
    <Flex align="center" gap={"10px"}>
      用户列表
      <Button
        type="primary"
        style={{ marginLeft: "auto" }}
        icon={<PlusOutlined />}
      >
        新建用户
      </Button>
      <Button icon={<ReloadOutlined />}></Button>
      <Button icon={<ColumnHeightOutlined />}></Button>
      <Button icon={<SettingOutlined />}></Button>
    </Flex>
  );
};

const UserList: React.FC = () => (
  <Table columns={columns} dataSource={data} title={CustomTableHeader} />
);

export default UserList;
export { };

// tengfangli@hotmail.com
